/**
 * 全局响应式样式
 * 提供统一的响应式工具类和基础样式
 */

/* 响应式容器 */
.responsive-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(10px, 2vw, 20px);
}

/* 响应式网格 */
.responsive-grid {
  display: grid;
  gap: clamp(12px, 2vw, 24px);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* 响应式字体大小 */
.responsive-title {
  font-size: clamp(24px, 5vw, 36px);
}

.responsive-subtitle {
  font-size: clamp(14px, 2.5vw, 18px);
}

.responsive-text {
  font-size: clamp(13px, 2vw, 16px);
}

/* 响应式间距 */
.responsive-padding {
  padding: clamp(10px, 2vw, 20px);
}

.responsive-margin {
  margin: clamp(10px, 2vw, 20px);
}

/* 移动端优化 */
@media (max-width: 768px) {
  /* 触摸友好的按钮 */
  .el-button {
    min-height: 44px; /* iOS推荐的最小触摸目标 */
    padding: 12px 20px;
  }

  /* 触摸友好的输入框 */
  .el-input__wrapper {
    min-height: 44px;
  }

  .el-select .el-input__wrapper {
    min-height: 44px;
  }

  /* 触摸友好的卡片 */
  .el-card {
    margin-bottom: 15px;
  }

  /* 优化表格在移动端的显示 */
  .el-table {
    font-size: 13px;
  }

  .el-table th,
  .el-table td {
    padding: 8px 5px;
  }

  /* 优化对话框 */
  .el-dialog {
    width: 95% !important;
    margin: 5vh auto !important;
  }

  .el-dialog__header {
    padding: 15px;
  }

  .el-dialog__body {
    padding: 15px;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
  }

  /* 优化抽屉 */
  .el-drawer {
    width: 85% !important;
  }

  /* 优化分页 */
  .el-pagination {
    justify-content: center;
    flex-wrap: wrap;
  }

  .el-pagination .el-pager li {
    min-width: 36px;
    height: 36px;
    line-height: 36px;
  }

  /* 优化标签页 */
  .el-tabs__item {
    padding: 0 15px;
    font-size: 14px;
  }

  /* 优化表单 */
  .el-form-item {
    margin-bottom: 18px;
  }

  .el-form-item__label {
    margin-bottom: 8px;
    font-size: 14px;
  }

  /* 优化菜单 */
  .el-menu-item {
    height: 48px;
    line-height: 48px;
  }

  .el-sub-menu__title {
    height: 48px;
    line-height: 48px;
  }
}

/* 小屏移动设备优化 */
@media (max-width: 480px) {
  .el-button {
    padding: 10px 16px;
    font-size: 14px;
  }

  .el-dialog {
    width: 98% !important;
    margin: 2vh auto !important;
  }

  .el-dialog__body {
    padding: 12px;
    max-height: calc(100vh - 120px);
  }

  .el-table {
    font-size: 12px;
  }

  .el-table th,
  .el-table td {
    padding: 6px 3px;
  }
}

/* 平板设备优化 */
@media (min-width: 768px) and (max-width: 991px) {
  .responsive-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
  }
}

/* 横屏移动设备 */
@media (max-width: 768px) and (orientation: landscape) {
  .el-dialog {
    max-height: 90vh;
  }

  .el-dialog__body {
    max-height: calc(90vh - 120px);
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  /* 移除hover效果，使用active状态 */
  .el-button:hover {
    transform: none;
  }

  .el-card:hover {
    transform: none;
  }

  /* 增加触摸目标大小 */
  .el-checkbox,
  .el-radio {
    min-width: 44px;
    min-height: 44px;
  }
}

/* 高DPI屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .el-icon {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* 打印样式 */
@media print {
  .el-header,
  .el-aside,
  .el-button,
  .el-pagination,
  .no-print {
    display: none !important;
  }

  .el-main {
    padding: 0;
    width: 100%;
  }

  .el-card {
    box-shadow: none;
    border: 1px solid #ddd;
    page-break-inside: avoid;
  }
}

